<template>
    <div class="daySi">
        <h1>第四题</h1>
        <h3>
            附加练习_6.买点好吃的
        </h3>


        <!--  -->
        <table>
            <tr v-for="val, i in arr" :key="i">
                <td>
                    {{ val.shopName }}
                    {{ val.price }}/份
                </td>
            </tr>
        </table>
        请选择购买数量：
        <table>
            <tr v-for="val, i in arr" :key="i">
                <haochide :val="val" :i="i" @jiaNum="jiaNum" @jianNum="jianNum"></haochide>
            </tr>
        </table>

        <!-- 总价 -->
        总结为: {{heNum}}
    </div>
</template>

<script>
import haochide from '@/components/haochide.vue'
export default {
    name: 'daySi',
    components: {
        haochide
    },
    data() {
        return {
            arr: [
                {
                    "shopName": "可比克薯片",
                    "price": 5.5,
                    "count": 0
                },
                {
                    "shopName": "草莓酱",
                    "price": 3.5,
                    "count": 0
                },
                {
                    "shopName": "红烧肉",
                    "price": 55,
                    "count": 0
                },
                {
                    "shopName": "方便面",
                    "price": 12,
                    "count": 0
                }
            ]
        }
    },
    computed: {
        heNum: {
            get() {
                return this.arr.reduce((sum, v) => {
                    return sum += v.count 
                },0)
            }
        }
    },
    methods: {
        jiaNum(v) {
            console.log(v);
            this.arr[v].count++
        },
        jianNum(v) {
            console.log(v);
            this.arr[v].count--
        }
    }
}
</script>

<style>

</style>